<template>
  <div style="margin-top: 100px">
    <!-- 轮播图 -->
    <div class="banner">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(banner,index) in bannerList" :key="banner.index">
          <img
            :src="banner.picUrl"
            v-lazy="banner.picUrl"
          />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 搜索结果列表 -->
    <div class="search">
      <div
        class="searchList"
        v-for="(shop, index) in categoryItemList"
        :key="shop.index"
      >
        <header class="header">
          <span class="name">{{ shop.category.name }}</span>
          <span class="desc">{{ shop.category.frontDesc }}</span>
        </header>

        <ShopList :searchShopList="shop.itemList"></ShopList>
      </div>
    </div>
  </div>
</template>

<script>
import { isInteger } from '@/utils/tool';
import { mapGetters } from 'vuex';
export default {
  name: 'Card',
  props: ['currentId'],
  data() {
    return {
      flag: true,
    };
  },
  methods: {
    getCategoryData() {
      this.$store.dispatch('getCategoryData', this.currentId);
    },
    // 处理到手价文本
    prefix(searchItem) {
      return (searchItem.finalPriceInfoVO.priceInfo.finalPrice || {}).prefix;
    },

    // 计算价格，分离整数和小数
    computedPrice(num, index) {
      if (index === 1) {
        if (!isInteger(num) && num) {
          return num.split('.')[index];
        } else {
          return;
        }
      }

      if (isInteger(num)) {
        return num;
      } else if (!num) {
        return;
      } else {
        return num.split('.')[index];
      }
    },

    // 处理价格
    price(searchItem, index) {
      return (
        this.computedPrice(
          (searchItem.finalPriceInfoVO.priceInfo.finalPrice || {}).price || '',
          index
        ) ||
        this.computedPrice(
          (searchItem.finalPriceInfoVO.priceInfo || {}).basicPrice,
          index
        )
      );
    },

    // 处理起字的文本
    suffix(searchItem) {
      return (searchItem.finalPriceInfoVO.priceInfo.finalPrice || {}).suffix;
    },

    // 处理原价
    originPrice(searchItem) {
      return (searchItem.finalPriceInfoVO.priceInfo || {}).counterPrice;
    },

    // 处理banner中左边的title
    title(searchItem) {
      return (searchItem.finalPriceInfoVO.banner || {}).title;
    },

    // 处理banner中右边的content
    content(searchItem) {
      return (searchItem.finalPriceInfoVO.banner || {}).content;
    },
  },
  watch: {
    currentId() {
      if (this.flag && this.currentId != -1) {
          console.log(this.currentId);
          this.getCategoryData();
      }
    },
  },
  computed: {
    ...mapGetters(['categoryItemList','currentCategory']),
    bannerList(){
      return this.currentCategory.bannerList || []
    }
  },
};
</script>

<style lang="less" scoped>
.banner {
  height: 158px;
  margin-top: -100px;
  .my-swipe {
    height: 158px;
    .van-swipe {
      position: relative;
      top: 62%;
      transform: translateZ(0);
      .van-swipe__indicator {
        width: 20px;
        height: 3px;
        position: relative;
        background-color: #fff;
        opacity: 0.4;
        border-radius: 0;
      }
      .van-swipe__indicator--active {
        opacity: 1;
      }
    }
    img {
      width: 100%;
      height: auto;
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      z-index: 9999;
    }
  }
}

.search {
  margin-top: 100px;
  .searchList {
    margin-top: 20px;
    .header {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 60px;
      width: 100%;
      background-color: #fff;
      .name {
        font-size: 16px;
      }
      .desc {
        font-size: 12px;
        margin-top: 5px;
        color: #c4a6a6;
      }
    }
    .searchResult {
      .shopList {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
        &::after {
          display: block;
          content: '';
          width: 173px;
        }
        .shopItem {
          width: 173px;
          position: relative;
          box-sizing: border-box;
          padding: 0 5px 26px 0;

          .hd {
            position: relative;
            width: 173px;
            height: 173px;
            border-radius: 6px;
            // 直接复制的
            .promDesc-wrap {
              display: flex;
              align-items: center;
              padding: 0 0.1rem;
              max-width: 2.31rem;
              position: absolute;
              bottom: 0.14rem;
              left: 0.14rem;
              color: #dd1a21;
              border: 1px solid #fa1e32;
              border-radius: 0.23rem;
              background: #fff;
              font-size: 0.2rem;
              img {
                width: 0.14rem;
                height: 0.16rem;
                margin-right: 0.05rem;
              }
              .promDesc {
                display: inline-block;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
            }
          }

          .name {
            font-size: 15px;
            margin-top: 8px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2; /** 多行文本溢出...*/
            overflow: hidden;
            .nameImg {
              vertical-align: -3px;
            }
          }

          // 价格
          .price {
            display: flex;
            align-items: center;
            height: 30px;
            .newPrice {
              display: flex;
              align-items: center;
              font-weight: 600;
              color: #fa1e32;
              .prefix {
                font-size: 12px;
              }
              .priceNumWrap {
                display: flex;
                align-items: center;
                .priceIcon {
                  font-size: 12px;
                  margin-top: 3px;
                }
                .priceNum {
                  font-size: 20px;
                }
                .priceFloat {
                  font-size: 12px;
                  margin-top: 4px;
                }
                .suffix {
                  font-size: 12px;
                }
              }
            }
            .originPrice {
              font-size: 12px;
              color: #999999;
              text-decoration: line-through;
              margin-top: 3px;
            }
          }

          .bannerWrap {
            margin-top: 5px;
            font-size: 12px;
            .banner {
              position: relative;
              &.formal {
                border-radius: 20px;
                padding-left: 2px;
                color: #fa1e32;
                background-color: #ffe9eb;
                font-weight: 600;
              }
              &.bgRed {
                width: auto;
                display: inline-block;
                padding-right: 2px;
                .content {
                  .right {
                    background-color: #fa1e32;
                    color: #fff;
                    padding: 2px 6px;
                    border-radius: 20px;
                    margin-left: 0; // 将左边的margin变为0

                    font-weight: 700;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                  }
                }
              }
              .icon {
                position: absolute;
                top: -3px;
                left: 20px;
              }
              .content {
                display: flex;
                align-items: center;
                height: 23px;
                background-color: #ffe9eb;
                border-radius: 20px;
                .left {
                  background-color: #fa1e32;
                  border-radius: 20px;
                  padding: 2px 4px;
                  height: 15px;
                  text-align: center;
                  color: #fff;
                }
                .right {
                  height: 15px;
                  margin-left: 4px;
                }
              }
            }
          }

          // 图片的描述
          .specification {
            position: absolute;
            display: flex;
            flex-direction: column;
            justify-content: center;
            border-radius: 0.75px;
            border: 0.5px solid #b4a078;
            width: 12px;
            top: 0;
            margin-top: 3.75px;
            margin-left: 3.75px;
            padding: 4.5px 0;
            color: #b4a078;
            background-color: #f4f4f4;
            div {
              font-size: 12px;
              text-align: center;
              line-height: 1;
            }
          }
        }
      }
    }
  }
}
</style>